<!DOCTYPE html>
<html lang="en" xmlns:display="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>PerformanceManagement</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id = "app">

    <div class="container-fluid"></div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3"> <h1 class="text-center">员工绩效</h1></div>

        <div class="col-sm-10 col-sm-offset-1">
            <!--            <a href="" class="btn btn-success btn-sm" @click="exportExcel">导出Excel</a>-->
            <!--            <br>-->

            <div class="input-group col-xs-3" style="margin-top:10px" >
                <input type="text" class="form-control" v-model= "fileName" id="fileName" placeholder="请输入保存文件名！" />
                <span class="input-group-btn">
               <button class="btn btn-info btn-search" @click="exportExcel">导出</button>
                </span>
            </div>

            <div class="input-group col-xs-3" style="margin-top:10px" >
                <input type="text" class="form-control" v-model= "eDepartment" id="eDepartment" placeholder="按部门查找" />
                <span class="input-group-btn">
               <button class="btn btn-info btn-search" @click="queryByEDepartment">查找</button>
                </span>
            </div>
            <div class="input-group col-xs-3" style="margin-top:10px">
                <input type="text" class="form-control" v-model= "eName" id = "eName"placeholder="按姓名查找" />
                <span class="input-group-btn">
               <button class="btn btn-info btn-search" @click="queryByEName">查找</button>
                </span>
            </div>




            <table class="table table-striped table-bordered" style="margin-top: 10px">
                <tr>
                    <th>员工编号</th>
                    <th>员工姓名</th>
                    <th>是否请假</th>
                    <th>是否迟到</th>
                    <th>是否旷工</th>
                    <th>是否早退</th>
                    <th>工作态度</th>
                    <th>工作完成度</th>
                    <th>绩效时间</th>
                </tr>
                <tr v-for="(performanceManagement,index) in performanceManagements" :key="performanceManagement.id">
                    <th>{{performanceManagement.employeeInformation.eId}}</th>
                    <th>{{performanceManagement.employeeInformation.eName}}</th>
                    <th>{{performanceManagement.isAskForLeave}}</th>
                    <th>{{performanceManagement.isLate}}</th>
                    <th>{{performanceManagement.isAbsent}}</th>
                    <th>{{performanceManagement.isLeaveEarly}}</th>
                    <th>{{performanceManagement.workAttitude}}</th>
                    <th>{{performanceManagement.workCompleteness}}</th>
                    <th>{{performanceManagement.pDate.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ').substring(0,19)}}</th>
                </tr>
            </table>
            <form>
                <div class="form-group">
                    <label for="eId">员工编号</label>
                    <input type="text" class="form-control" v-model="employeeInformation.eId" id="eId" placeholder="请输入员工编号">
                </div>
                <!--                <div class="form-group">-->
                <!--                    <label for="eName">员工姓名</label>-->
                <!--                    <input type="text" class="form-control" v-model="employeeInformation.eName" id="eName" placeholder="请输入姓名">-->
                <!--                </div>-->
                <div class="form-group">
                    <label for="isAskForLeave">是否请假</label>
                    <!--                            <input type="text" class="form-control" id="isAskForLeave" placeholder="请输入工资">-->
                    <select class="form-control" v-model="performanceManagement.isAskForLeave" id="isAskForLeave">
                        <option>否</option>
                        <option>是</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="isLate">是否迟到</label>
                    <!--                            <input type="text" class="form-control" id="isLate" placeholder="请输入姓名">-->
                    <select class="form-control" v-model="performanceManagement.isLate" id="isLate">
                        <option>否</option>
                        <option>是</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="isAbsent">是否旷工</label>
                    <!--                            <input type="text" class="form-control" id="isAbsent" placeholder="请输入工资">-->
                    <select class="form-control" v-model="performanceManagement.isAbsent"id="isAbsent">
                        <option>否</option>
                        <option>是</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="isLeaveEarly">是否早退</label>
                    <!--                            <input type="text" class="form-control" id="isLeaveEarly" placeholder="请输入工资">-->
                    <select class="form-control"  v-model="performanceManagement.isLeaveEarly" id="isLeaveEarly">
                        <option>否</option>
                        <option>是</option>
                        <!--                            <option>3</option>-->
                        <!--                            <option>4</option>-->
                        <!--                            <option>5</option>-->
                    </select>
                </div>

                <div class="form-group">
                    <label for="workAttitude">工作态度</label>
                    <!--                            <input type="text" class="form-control" id="workAttitude" placeholder="请输入工资">-->
                    <select class="form-control" v-model="performanceManagement.workAttitude" id="workAttitude" autocomplete="off">
                        <option>优秀</option>
                        <option>良好</option>
                        <option>一般</option>
                        <option>较差</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="workCompleteness">工作完成度</label>
                    <!--                            <input type="text" class="form-control" id="workCompleteness" placeholder="请输入工资">-->
                    <select class="form-control"  v-model="performanceManagement.workCompleteness" id="workCompleteness">
                        <option >优秀</option>
                        <option>良好</option>
                        <option>一般</option>
                        <option>较差</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="pDate">绩效时间</label>
                    <input type="date" class="form-control" value = "newdate()" v-model="performanceManagement.pDate" id="pDate" >
                </div>
                <button type="submit" class="btn btn-block btn-info" @click="save">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>


<script  type="module">



    var app=new Vue({
        el:"#app",
        data:{
            msg:"123",
            performanceManagements:[],
            employeeInformation:{},
            performanceManagement:{},
            eDepartment:"",
            eName:"",
            fileName:"",
        },
        methods:{
            save(){ //保存
                this.performanceManagement.employeeInformation  =  this.employeeInformation;
                axios.post("http://localhost:8080/save",this.performanceManagement).then(res=>{
                    this.performanceManagement={};
                    alert('保存成功！')
                }).catch(err=>{
                    alert('保存失败')
                })

            },

            exportExcel(){
                axios.post("http://localhost:8080/exportExcel",
                    {
                        performanceManagements: this.performanceManagements,
                        fileName: this.fileName
                    }
                ).then(res=>{
                    alert('导出成功！')
                }).catch(err=>{
                    alert('导出失败！')
                    return;
                });

            },
            queryByEDepartment(){
                axios.get("http://localhost:8080/queryByEDepartment", {  //params参数必写 , 如果没有参数传{}也可以
                    params: {
                        eDepartment: this.eDepartment
                    }}).then(res=>{
                    this.performanceManagements = res.data;
                }).catch(err=>{
                    alert('查询失败！')
                    return;
                });
                this.eDepartment="";
            },
            queryByEName(){
                axios.get("http://localhost:8080/queryByEName", {  //params参数必写 , 如果没有参数传{}也可以
                    params: {
                        eName: this.eName
                    }}).then(res=>{
                    this.performanceManagements = res.data;
                }).catch(err=>{
                    alert('查询失败！')
                    return;
                });
                this.eName="";
            },
            update(performanceManagement){
            },

        },
        computed:{

        },
        created(){
            // this.performanceManagements=[{pId:2,employeeInformation:{eId:1,eName:"yang",eSex:"男",eTel:"男",eDepartment:"111",ePosition:"ww",ePostState:"sss",eHiredate:"1969-12-31T16:00:00.001",eLeavedate:"2021-05-27T08:21:47.000"},isAskForLeave:"",isLate:"否",isAbsent:"",isLeaveEarly:"否",workAttitude:"优秀",workCompleteness:"优秀",pDate:"2021-05-27T08:22:27.520"}]
            axios.get("http://localhost:8080/all").then(res=>{
                this.performanceManagements = res.data;
            });
            let d = new Date()
            if(d.getMonth()<10)
                this.performanceManagement.pDate = d.getFullYear() + '-' + '0' + (d.getMonth() + 1) + '-' + d.getDate();
            else
                this.performanceManagement.pDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            this.performanceManagement.isAskForLeave="否";
            this.performanceManagement.isLate="否";
            this.performanceManagement.isAbsent="否";
            this.performanceManagement.isLeaveEarly="否";
            this.performanceManagement.workAttitude="优秀";
            this.performanceManagement.workCompleteness="优秀";
        }
    });
</script>